<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>MVC Test for dynamic label and calculating totals</title>
		<style type="text/css">
			@import "../css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";
			.cell { width: 30%;  display:inline-block; }
		</style>

		<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../../dojo/dojo.js"></script>
		<script type="text/javascript">
			var model;

			require([
				"doh/runner",
				"dojo/dom",
				"dojo/parser",
				"dojo/when",
				"dijit/registry",
				"dojox/mvc/getStateful",
				"dijit/form/TextBox",
				"dijit/form/Button",
				"dojox/mvc/Group",
				"dojox/mvc/WidgetList",
				"dojox/mvc/_InlineTemplateMixin",
				"dojox/mvc/Output"
			], function(doh, ddom, parser, when, registry, getStateful){

				// Order data
				orderData = {
					"Serial" : "111",
					"First" : "",
					"Lab" : "TEST",
					"Last" : "last",
					"Email" : "email",
					"Age" : "33"
				};

				// Initial sum data
				sumData = {
					"one" : 1,
					"two" : 2,
					"three" : 3,
					"four" : 4,
					"total" : 10
				};

				// Initial repeat sum data
				sumRepeatData = {
					"list" : [
					          {"item" : 1},
					          {"item" : 2},
					          {"item" : 3},
					          {"item" : 4}
					          ],	
					"total" : 10
				};

				sumValuesConverter = {
						format: function(value){
							console.log("in sumValuesConverter format value ="+value);
							value = value || 0;
							return value;
						},
						parse: function(value){
							console.log("in sumValuesConverter parse value ="+value);
							recomputeTotal();
							return value;
						}
				};

				ageLabelConverter = {
						format: function(value){
							console.log("in ageLabelConverter format value ="+value);
							if(!value){
								return "Enter Age";
							}else{
								return "Enter "+value+"'s age";
							}
						},
						parse: function(value){
							console.log("in ageLabelConverter parse value ="+value);
							return value;
						}
				};


				sumRepeatValuesConverter = {
						format: function(value){
							console.log("in sumRepeatValuesConverter format value ="+value);
							value = value || 0;
							return value;
	//						recomputeRepeatTotal();
	//						return value;
						},
						parse: function(value){
							console.log("in sumRepeatValuesConverter parse value ="+value);
							recomputeRepeatTotal();
							return value;
						}
				};

				//summodel = mvc.newStatefulModel({ data : sumData });
				summodel = getStateful(sumData );

				//sumrepeatmodel = mvc.newStatefulModel({ data : sumRepeatData });
				sumrepeatmodel = getStateful(sumRepeatData);

				//model = mvc.newStatefulModel({ data : order });
				model = getStateful(orderData);
				
				function recomputeTotal() {
					require([
					         "dijit/registry",
					         "dojox/mvc/at"
					         ], function(registry, at){
									var total = 0;			
									var wone = parseInt(registry.byId("oneInput").get("value")) || 0;
				   					var wtwo = parseInt(registry.byId("twoInput").get("value")) || 0;
									var wthree = parseInt(registry.byId("threeInput").get("value")) || 0;
				   					var wfour = parseInt(registry.byId("fourInput").get("value")) || 0;
				   					total = wone + wtwo + wthree + wfour;
				   					var wtotal = registry.byId("totalOutput");
				   					wtotal.set("value", total);			   					
								});
				}

				function recomputeRepeatTotal() {
					require([
					         "dijit/registry",
					         "dojox/mvc/at"
					         ], function(registry, at){
									var total = 0;
									for(var i=0;i<sumrepeatmodel.list.length;i++){
										var item = parseInt(registry.byId("input"+i).get("value")) || 0;
										console.log("sumrepeatmodel item = "+item);
										total = total + item;
									}
				   					var wtotal = registry.byId("totalrepeatOutput");
				   					wtotal.set("value", total);			   					
								});
				}

				when(parser.parse(), function(){
					recomputeTotal();

					doh.register("Synchronize text box and label", [{
						name: "Check first value",
						runTest: function(){
							doh.is("", registry.byId("firstInput").get("value"), "First should reflect initial data");
							doh.is("last", registry.byId("lastnameInput").get("value"), "Last should reflect initial data");
							doh.is("email", registry.byId("emailInput").get("value"), "Email should reflect initial data");
							doh.t(/\s*\(Enter Age\)\s*/, registry.byId("ageOutput").innerHTML, "First should reflect initial data");
							doh.is("10", registry.byId("totalOutput").get("value"), "totalOutput should reflect initial data");
							doh.is("10", registry.byId("totalrepeatOutput").get("value"), "totalrepeatOutput should reflect initial data");						
						}
					}, {
						name: "Change first and check age label",
						runTest: function(){
							model.set("First", "John");
							doh.is("John", registry.byId("firstInput").get("value"), "First should reflect initial data");
							doh.t(/\s*\(Enter John's Age\)\s*/, registry.byId("ageOutput").innerHTML, "First should reflect initial data");
						}
					}, {
						name: "Change oneInput and item 0 and check totalOutput and totalrepeatOutput",
						runTest: function(){
							summodel.set("one", 11);
							doh.is("20", registry.byId("totalOutput").get("value"), "totalOutput should reflect updated value");
							sumrepeatmodel.list[0].set("item", 211);
							doh.is("220", registry.byId("totalrepeatOutput").get("value"), "totalrepeatOutput should reflect updated value");
						}
					}, {
						name: "blank oneInput and item 0 and check totalOutput and totalrepeatOutput",
						runTest: function(){
							summodel.set("one", "");
							doh.is("9", registry.byId("totalOutput").get("value"), "totalOutput should reflect updated value");
							doh.is("0", registry.byId("oneInput").get("value"), "oneInput should reflect updated value");
							sumrepeatmodel.list[0].set("item", "");
							doh.is("9", registry.byId("totalrepeatOutput").get("value"), "totalrepeatOutput should reflect updated value");
							doh.is("0", registry.byId("input0").get("value"), "input0 should reflect updated value");
						}
					}, {
						name: "Check model reset",
						setUp: function(){
							//model.reset();
							//summodel.reset();
							//sumrepeatmodel.reset();
							summodel.set(sumData);
							sumrepeatmodel.set(sumRepeatData);
							model.set(orderData);
						},
						runTest: function(){
							doh.is("", registry.byId("firstInput").get("value"), "First should reflect initial data");
							doh.is("last", registry.byId("lastnameInput").get("value"), "Last should reflect initial data");
							doh.is("email", registry.byId("emailInput").get("value"), "Email should reflect initial data");
							doh.t(/\s*\(Enter Age\)\s*/, registry.byId("ageOutput").innerHTML, "First should reflect initial data");
							doh.is("10", registry.byId("totalOutput").get("value"), "totalOutput should reflect initial data");
							doh.is("10", registry.byId("totalrepeatOutput").get("value"), "totalrepeatOutput should reflect initial data");						
						}
						
					}]);

					doh.run();
				});
			});
		</script>
	</head>
	<body class="claro">
	<script type="dojo/require">at: "dojox/mvc/at"</script>
	<div id="wrapper">
	<div id="header">
		<div id="navigation">
		</div>
		<div id="headerInsert">
			<h2>MVC Test for dynamic label and calculating totals</h2>
		</div>
	</div>
	<div id="main">
		<div id="leftNav"></div>
		<div id="mainContent">
		<h4>Update Age label with first name when it is set.</h4>
		<div data-dojo-type="dojox.mvc.Group"
			data-dojo-props="target: model">		
			<div class="row">
				<label class="cell" for="firstInput">Enter first name:</label>
				<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'First')">
				</div>
			<div class="row">
				<label class="cell" for="lastnameInput">Enter last name:</label>
				<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Last')">
			</div>
			<div class="row">
				<label class="cell" for="emailInput">Enter email:</label>
				<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Email')">
			</div>
			<div class="row">
				<label data-dojo-type="dojox.mvc.Output" class="cell" for="ageInput" id="ageOutput"
					data-dojo-props="value: at('rel:', 'First').direction(at.from).transform(ageLabelConverter)"></label>
				<input class="cell" id="ageInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Age')">
			</div>
		</div>
		<br/>
		<h4>Update total when any of the fields are changed.</h4>
		<div data-dojo-type="dojox.mvc.Group"
			data-dojo-props="target: summodel">
			<div class="row">
				<label class="cell" for="oneInput">Item one:</label>
				<input class="cell" id="oneInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'one').transform(sumValuesConverter)">
			</div>
			<div class="row">
				<label class="cell" for="twoInput">Item two:</label>
				<input class="cell" id="twoInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'two').transform(sumValuesConverter)">
			</div>
			<div class="row">
				<label class="cell" for="threeInput">Item three:</label>
				<input class="cell" id="threeInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'three').transform(sumValuesConverter)">
			</div>
			<div class="row">
				<label class="cell" for="fourInput">Item four:</label>
				<input class="cell" id="fourInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'four').transform(sumValuesConverter)">
			</div>
			<div class="row">
			<label class="cell" for="totalOutput">Total:</label>
			<div class="cell" id="totalOutput" data-dojo-type="dojox.mvc.Output" 
				data-dojo-props="value: at('rel:', 'total')"></div>
		</div>
		<br/>
		<h4>Update total when any of the fields are changed - Using a Repeat.</h4>
		<div id="outergroupId" data-dojo-type="dojox.mvc.Group" 
								data-dojo-props="target: sumrepeatmodel">
			<div id="repeatId"
				data-dojo-type="dojox/mvc/WidgetList"
				data-dojo-mixins="dojox/mvc/_inlineTemplateMixin"
				data-dojo-props="children: at('rel:', 'list')">
				<script type="dojox/mvc/InlineTemplate">
					<div class="row">
						<label class="cell" for="input${indexAtStartup}">Item ${indexAtStartup}:</label>
						<input class="cell" id="input${indexAtStartup}" data-dojo-type="dijit.form.TextBox" 
							data-dojo-props="value: at('rel:', 'item').transform(sumRepeatValuesConverter)">
					</div>
				</script>
			</div>
			<div class="row">
				<label class="cell" for="totalrepeatOutput">Total:</label>
				<div class="cell" id="totalrepeatOutput" data-dojo-type="dojox.mvc.Output" 
					data-dojo-props="value: at('rel:', 'total')"></div>
		</div>
	</div>
	<br/>
	<br/>
	Model:
	<button id="reset" type="button" data-dojo-type="dijit.form.Button" 
			data-dojo-props="onClick: function(){model.set(orderData);summodel.set(sumData);sumrepeatmodel.set(sumRepeatData);}">Reset</button>
	</div></div></div></div>
	</body>
</html>
